
<template>

    <div>
        <div class="search">
            <el-button type="primary" size="mini" @click="addClick">添加角色</el-button>
        </div>
       
       <el-table
    :data="tableData"
    style="width: 99%"
     size="mini">
      
    <el-table-column
      label="角色编号"
      width="180">
      <template slot-scope="scope">
       
       {{ scope.row.roleId }}
      </template>
    </el-table-column>
    <el-table-column
      label="角色名称"
      width="180">
      <template slot-scope="scope">
       
        {{ scope.row.roleName }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="warning"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-drawer
  :title="isAdd?'添加角色':'修改角色'"
  :visible.sync="drawer"
  direction="rtl"
  :before-close="drawerClose">
 <div style="padding:0 10px">
      <el-form
      size="mini"
       :model="ruleForm"
        status-icon :rules="rules" 
        ref="ruleForm"
         label-width="80px"
         class="demo-ruleForm">
        <el-form-item label="角色名称" prop="roleName">
    <el-input  v-model="ruleForm.roleName"  autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">{{isAdd?'添加':'修改'}}</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>

</el-form>
 </div>
</el-drawer>

    </div>
</template>
<script>
// import * as role_api from '../../api/role_api.js'
export default {
     data() {
        var validateRoleName= (rule, value, callback) => {
        if (value === "") {
          callback(new Error('请输入角色名称'));
        }else{
          callback()
        }
      };
      return {
        tableData: [],
        drawer:false,
        isAdd:true,
         ruleForm: {
        roleName:"",
         
        },
        rules: {
          //表单的验证数据
        roleName: [{ validator: validateRoleName, trigger: 'blur' }],
       
         
        },
      };

    },
    created() {
     this.getTableData()
       
    },
    methods: {
    //获取表格数据方法
    async getTableData(){
    let res = await this.$get('/Role/List');
    // let res = await role_api.List()
    this.tableData = res;

     },
     addClick() {
         this.drawer = true;
     },
    drawerClose(done) {
    //  this.ruleForm={};
    this.resetForm('ruleForm')
     this.isAdd = true;
          done();
        },
    
    submitForm(formName) {
        //判断表单数据是否验证成功
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
        if(this.isAdd){
 let {success,message} = await this.$post('/Role/Add',this.ruleForm)
         //判断是否添加成功  
    if(success){
  this.$msg_s(message)
    //获取最新的信息
       this.getTableData()
         }else{
  this.$msg_e(message)
         }
        }else{
 let {success,message} = await this.$post('/Role/Update',this.ruleForm)
         //判断是否修改成功  
    if(success){
  this.$msg_s(message)
    //获取最新的信息
       this.getTableData()
         }else{
  this.$msg_e(message)
         }
        }
         //执行添加功能
  //       let {success,message} = await this.$post('/Role/Add',this.ruleForm)
  //        //判断是否添加成功  
  //   if(success){
  // this.$msg_s(message)
  //   //获取最新的信息
  //      this.getTableData()
  //        }else{
  // this.$msg_e(message)
  //        }       
            return false;
  
          }
        });
        
      },
      //表单重置方法
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //删除表格数据
     async handleEdit(index, row) {
        let roleId = row.roleId;
        let res = await this.$get('/Role/GetOne',{roleId})
        this.ruleForm = res
        this.isAdd = false;
        this.drawer = true;
      },
      async handleDelete(index, row) {
        //获取角色编号
       await this.$con_f('是否确定删除？')
     let roleId = row.roleId;
     //删除对应的角色信息
    let {success,message} = await this.$post('/Role/Delete',{roleId});
     if(success){
       this.$msg_s(message)
       this.getTableData();
     }else{
       this.$msg_e(message)
     }

        
      },
    },
};
  

</script>
<style scoped lang="scss">
   .search{
      
      
   }
</style>